<template>
  <el-dialog :title="dialogTitle" v-model="dialogVisible"  width="60%" center>
    <el-card>
      <template #header>
        <div class="card-header">
          <div class="user-details">
            用户信息
          </div>
        </div>
      </template>
      <div>
        <el-row :gutter="10">
          <el-col :span="6">
      <div class="avatar-wrapper">
        <img :src="userUrl" alt="加载失败" class="avatar">
      </div>
          </el-col>
          <el-col :span="18">
            <div class="content">
              <el-descriptions :column="1" border>
                <el-descriptions-item label="用户名">{{ user.username }}</el-descriptions-item>
                <el-descriptions-item label="邮箱">{{ user.email }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ user.phone }}</el-descriptions-item>
                <el-descriptions-item label="年龄">{{ user.age }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ user.gender === 'MALE' ? '男' : '女' }}</el-descriptions-item>
              </el-descriptions>
              <el-form label-width="100px">
                <el-form-item label="个人简介">
                  <el-input type="textarea" v-model="editableInfo.introduction" :rows="4">{{user.introduction}}</el-input>
                </el-form-item>
              </el-form>
              <div class="guide-status">
                <el-descriptions :column="1" border>
                  <el-descriptions-item label="你的身份是？">
                    <el-radio-group v-model="editableInfo.isGuide">
                      <el-radio :label="0" value="0">游客</el-radio>
                      <el-radio :label="1" value="1">导游</el-radio>
                    </el-radio-group>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="$emit('close')">取消</el-button>
        <el-button type="primary" @click="updateGuideInfo">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {computed, ref} from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import qs from "qs";


const dialogTitle = ref("你的角色");
const dialogVisible = ref(false); // 注意这里初始化为false

const editableInfo = ref({ isGuide: '', introduction: '' });

const user = ref(getUser());

const userUrl = () =>{
  let url = BASE_URL + user.value.imgUrl;
  return url;
}

const emit = defineEmits(['close']); // 声明可以发射的事件
const updateGuideInfo = () => {
  editableInfo.value.id = user.value.id;
  let data = qs.stringify(editableInfo.value);
  console.log(data);
  axios.post(BASE_URL + '/yyt/user/updateUserInfo', data).then(response => {
        if (response.data.code === 2000) {
          ElMessage.success("切换成功");
          editableInfo.value = '';
          emit('close');
        } else {
          ElMessage.error("更新失败，请检查信息是否正确");
        }
      })
};

</script>

<style scoped>
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.avatar-wrapper {
  display: flex; /* 使div成为flex容器 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.content {
}
.avatar {
  border-radius: 50%; /* Makes the image circular */
  object-fit: cover; /* Ensures the image fills the space */
  height: 150px;
  width: 150px;
 
}

.user-details {
  flex-grow: 1; /* Takes up the remaining space on the left side */
  text-align: left; /* Aligns text to the left */
  font-size: 1.2em;
  font-weight: bold;
}
</style>